<template>
    <div class="container">
        <div class="searchMy">
            <el-form :inline="true" size="mini" class="searchMy-form" ref="form" :model="queryObj">
                <el-form-item label="填报期">
                    <el-date-picker v-model="queryObj.date" value-format="yyyy-MM" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" type="primary" @click="getTableData()">汇总</el-button>
                    <el-button size="mini" type="primary" @click="go('dwfx')">多维分析</el-button>
                    <el-button size="mini" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="tbImg" @click="go('wdtb')">
                <img src="@/assets/images/u2477.png" alt="">
            </div>
        </div>
        <div class="table-list">
            <div style="padding:7px;" class="kplist">
                <span>统计周期：{{ queryObj.date[0]+'至'+queryObj.date[1] }}</span>
                <span>单位：元</span>
            </div>

            <el-table v-loading="loading" :data="tableDatas" style="width: 100%" :height="$store.state.app.windowHeight - 212">
                <el-table-column type="index" label="序号" width="60" align="center" :index="currIndex">
                </el-table-column>

                <el-table-column prop="ds" label="地市" width="150" align="center">
                </el-table-column>
                <el-table-column prop="rwnd" label="任务所属年度" width="150" align="center">
                </el-table-column>
                <el-table-column prop="qylx" label="企业类型" width="150" align="center">
                </el-table-column>
                <el-table-column prop="ssjt_nsrsbh" label="纳税人识别号" width="150" align="center">
                </el-table-column>
                <el-table-column prop="ssjt" label="集团名称" width="150" align="center">
                </el-table-column>
                <el-table-column prop="jtsshy" label="集团所属行业" width="150" align="center">
                </el-table-column>
                <el-table-column prop="fxjhlx" label="风险计划类型" width="150" align="center">
                </el-table-column>
                <el-table-column prop="xdfxsl" label="选定分析的成员企业数量" width="200" align="center">
                </el-table-column>
                <el-table-column label="已发现风险的成员企业（累计）">
                    <el-table-column prop="yfxfxqysl" label="成员企业数量" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="yhsfxdgs" label="已核实风险点个数" width="150" align="center">
                    </el-table-column>
                    <el-table-column prop="rkskhj" label="已入库税款" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="znjhj" label="滞纳金" width="100" align="center">
                    </el-table-column>

                </el-table-column>
                <el-table-column label="暂未发现风险的成员企业（累计）" align="center">
                    <el-table-column prop="zwfxfxqysl" label="成员企业数量" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="zwfxfxyy" label="暂未发现风险原因" width="150" align="center">
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="bz" label="备注"></el-table-column>
            </el-table>
            <el-pagination background :current-page="queryObj.pageNo" :page-size="queryObj.pageSize" :page-sizes="[20, 50, 80, 100, 200, 500]" :total="total" :pager-count="7" layout="total, sizes, prev, pager, next, jumper" @current-change="changepageNo" @size-change="changePageSize"></el-pagination>
        </div>
    </div>
</template>

<script>
import { queryHz } from '@/api/cxtj/fxcx'
export default {
    name: 'fxcx',

    data() {
        return {
            loading: false,
            tableDatas: []
            , queryObj: {
                date: [],
                pageNo: 1,
                pageSize: 20
            },
            total: 0
        }
    },

    mounted() {
       this.defaultTime()

    },
    methods: {

        defaultTime() {
            //日期范围
            var currentDate = new Date();
            var currentYear = currentDate.getFullYear();
            var currentMonth = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
            if (currentMonth < 10) {
                currentMonth = '0' + currentMonth
            }
            console.log(currentYear, currentMonth);
            this.queryObj.date = [currentYear + '-01', currentYear + '-' + currentMonth]
        },
        resetForm() {
            this.defaultTime()
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                }
            }
            this.getTableData();
        },
        getTableData() {
            this.loading = true
            let params={
                tbqq:this.queryObj.date[0],
                tbqz:this.queryObj.date[1],
                pageNum:this.queryObj.pageNo,
                pageSize:this.queryObj.pageSize,
            }
            queryHz(params).then(res => {
                this.loading= false
                if(res.code == 200){
                    this.tableDatas = res.data.records
                    this.total = res.data.total
                }
                console.log(res)
            })
        },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        currIndex(index) {
            return (this.queryObj.pageNo - 1) * this.queryObj.pageSize + index + 1;
        },
        go(name, params) {
            this.$emit('changePage', name, params);
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;

    .searchMy {
        background: #fff;
        padding: 8px;
        position: relative;

        .tbImg {
            width: 28px;
            height: 28px;
            position: absolute;
            top: 7px;
            right: 0;
            cursor: pointer;

            img {
                width: 28px;
                height: 28px;
            }
        }

        .searchMy-form {
            height: 28px;
        }
    }

    .btn {
        padding: 8px 8px 8px 0;
    }

    .kplist {
        display: flex;
        justify-content: space-between;

        span {
            font-size: 14px;
            font-weight: normal;
            color: rgba(0, 0, 0, 0.56);
        }
    }

}

.el-pagination {
    text-align: right;
    padding: 8px 16px 8px 0;
    background: #fff;
}
</style>
